import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { Sudoku, Label } from 'iftide';

export default class User1 extends Component{
    constructor(props) {
        super(props);
    }

    render() {
        const dataList_3 = [
            {
                'icon': require('./Icon.png'),
                'title': '投资理财投资理财',
                'description1': '说明说明说明',
                'onPress': () => alert(1),
                titleStyle:{color:'red'}
            },
            {
                'icon': require('./Icon.png'),
                'title': '账户转账',
                'description1': '说明说明说明说',
                'onPress': () => alert(2),
                titleStyle:{color:'green'}
            },
            {
                'icon': require('./Icon.png'),
                'title': 'AI投',
                'description1': '说明说明说明说',
                'onPress': () => alert(3),
                'showBadge': false,
                'badge': '万2.6'
            },
            {
                'icon': require('./Icon.png'),
                'title': 'AI投',
                'description1': '说明说明说明说',
                'onPress': () => alert(3),
                'showBadge': false,
                'badge': '万2.6'
            },
            
        ];

        return (
            <View style={{justifyContent:'center',alignItems:'center'}}>
                <View style={[styles.container, {backgroundColor: '#F5F7F9'}]}>
                    <Label text = '宫格样式 - 自定义样式  ' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <Sudoku 
                    columnCount={4} 
                    dataSource={dataList_3} 
                    hasTitle={true} 
                    hasDescription={true} 
                    singleTitle={true}  
                    hasInnerBorder={false} 
                    hasOuterBorder={false}  
                    rowWidth={340}
                    cellHeight={60}
                    imageStyle={{width:18,height:18}}
                />
             </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 13,
        paddingVertical: 8,
        backgroundColor: '#F5F7F9'
    },
    divider: {
        height: 10,
        backgroundColor: '#F5F7F9'
    }
});